<template>
  <div id="banner">
    <div class="box" @mouseout="out" @mouseover="over">
      <div class="top_title"><i class="iconfont icon-daochu1024-07"></i>热门文章</div>
      <router-link v-for="(item, index) in hotArticles" :key="index" :to="'/article/' + item.id">
        <img
            v-show="listIndex === index"
            :src="item.avatar"
            alt=""
        />
      </router-link>
      <p class="left" @click="changePage(prevIndex)"><i class="iconfont icon-zuojiantou-"></i></p>
      <ul>
        <li
            :class="{ color: index == listIndex }"
            v-for="(item, index) in hotArticles"
            @click="changePage(index)"
            :key="index"
        ></li>
      </ul>
      <p class="right" @click="changePage(nextIndex)"><i class="iconfont icon-youjiantou"></i></p>
      <!--底部标题-->
      <div class="swipe_title">
        {{ hotArticles[listIndex].title }}
      </div>
    </div>
  </div>
</template>

<script>
import {hotArticle} from "@/api";

export default {
  name: "banner",
  data() {
    return {
      hotArticles: [
        {
          title: 'xxx'
        }
      ],
      listIndex: 0,
      timer: null,
    };
  },
  computed: {
    //上一张
    prevIndex() {
      if (this.listIndex == 0) {
        return this.hotArticles.length - 1;
      } else {
        return this.listIndex - 1;
      }
    },
    //下一张
    nextIndex() {
      if (this.listIndex == this.hotArticles.length - 1) {
        return 0;
      } else {
        return this.listIndex + 1;
      }
    }
  },
  created() {
    this.hotArticle();
    //定时器
    this.setTimer();
  },
  methods: {
    hotArticle() {
      hotArticle().then(res => {
        this.hotArticles = res.data;
      })
    },
    changePage(index) {
      this.listIndex = index;
    },
    //移除
    out() {
      this.setTimer();
    },
    //移入
    over() {
      clearInterval(this.timer);
    },
    //3秒切图
    setTimer() {
      this.timer = setInterval(() => {
        this.listIndex++;
        if (this.listIndex == this.hotArticles.length) {
          this.listIndex = 0;
        }
      }, 3000);
    }
  }
}
</script>

<style scoped lang="less">

.box {
  position: relative;
  width: 100%;
  height: 600px;
}

.top_title {
  position: absolute;
  line-height: 50px;
  height: 50px;
  width: 120px;
  z-index: 20;
  text-align: left;
  color: white;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: darkred;
}

img {
  width: 100%;
  height: 100%;
  z-index: 100;
}

p {
  cursor: pointer;
  color: white;
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}

.left {
  position: absolute;
  top: 50%;
  left: 0;
}

.right {
  position: absolute;
  top: 50%;
  right: 0;
}

.iconfont {
  font-size: 30px;
}

ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  width: 150px;
  height: 20px;
  top: 96%;
  left: 42.67%;
}

.color {
  background: red;
  color: red;
}

li {
  cursor: pointer;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}

.swipe_title {
  position: absolute;
  line-height: 50px;
  height: 50px;
  width: 80%;
  z-index: 20;
  text-align: center;
  color: white;
  font-size: 30px;
  top: 50%;
  bottom: 50%;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
